<!--收藏主题、回复时使用的小弹窗-->
<script setup>
import {ref, toRefs} from "vue";
import {useStore} from "vuex";
import {ElementUtils} from "@/assets/js/ElementUtils";

const props = defineProps({
  data: {type: Object},
  tid: {type: Number},
  pid: {type: Number},
  modelValue: {type: Boolean},
})
const emit = defineEmits(['update:modelValue'])
const store = useStore();
const {data, modelValue, tid, pid} = toRefs(props)

const folders = ref();
const folderId = ref();
// 查询收藏夹列表
const favorFolderList = () => {
  const loading = ElementUtils.loading({target: "#favor_folder_selector",});
  return store.dispatch("Favor/favorFolderList", {force: false}).then(res => {
    folders.value = res
    folderId.value = res[0].id
    console.log(res)
  }).finally(() => {
    loading.close()
  });
}
// 收藏主题、回复
const favorTopicAdd = () => {
  return store.dispatch("Favor/favorTopicAdd", {
    folderId: folderId.value,
    tid: tid.value,
    pid: pid.value,
  }).then(message => {
    ElementUtils.notice({message})
  }).finally(() => {
    popover.value.hide()
  })
}

const popover = ref();

</script>

<template>
  <el-popover
      ref="popover"
      placement="bottom"
      title="选择收藏夹"
      trigger="click"
      width="200"
      @show="favorFolderList"
  >
    <div id="favor_folder_selector">
      <el-radio-group v-model="folderId">
        <el-radio v-for="({id,name,length}) in folders" :label="id">{{ name }}({{ length }})</el-radio>
      </el-radio-group>
      <el-button type="success" @click="favorTopicAdd">确认</el-button>
    </div>
    <template #reference>
      <slot></slot>
    </template>
  </el-popover>
</template>

<style scoped>
#favor_folder_selector {
  min-height: 30px;
}
</style>